import React, {Component} from 'react';
import './shopBar.scss';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {addSelect, changeIsShowChoose, removeSelect, cleanCar} from "../actions/menuAction";

class ShopBar extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    /**
     * 获取用户购买信息
     */
    getBuyInfo = () => {
        let listData = this.props.menuData.food_spu_tags || [];
        let totalPrice = 0; // 总价格
        let dotNum = 0; // 选择总数
        let chooseList = []; // 选择列表

        for (let i = 0 ; i< listData.length ; i++) {
            let spus = listData[i].spus || [];
            for (let j = 0 ; j < spus.length ; j++) {
                let chooseCount = spus[j].chooseCount;
                if (chooseCount > 0) {
                    dotNum += chooseCount;
                    spus[j]._index = j; // 二级索引
                    spus[j]._outIndex = i; // 一级索引
                    chooseList.push(spus[j]);
                    totalPrice += spus[j].min_price * chooseCount;
                }
            }
        }

        return {
            dotNum,
            totalPrice,
            chooseList
        }
    }

    toSubmit() {
        let data = this.getBuyInfo();
        console.log(data.chooseList)
    }

    // 展示购物车列表
    showChoose() {
        let _isShow = this.props.isShowChoose;
        this.props.changeIsShowChooseAction({
            isShowChoose: !_isShow
        })
    }

    // 渲染购物车列表
    renderChooseItem(data) {
        let array = data.chooseList || [];
        return array.map((item, index)=>{
            return (
                <div key={index} className="choose-item">
                    <div className="item-name">{item.name}</div>
                    <div className="price">¥{item.min_price * item.chooseCount}</div>
                    <div className="select-content">
                        <div onClick={()=>this.minusSelectItem(item)} className="minus"></div>
                        <div className="count">{item.chooseCount}</div>
                        <div onClick={()=>this.addSelectItem(item)} className="plus"></div>
                    </div>
                </div>
            )
        })
    }

    // 添加数量
    addSelectItem(item) {
        this.props.addSelectAction({
            sub_index: item._index,
            fu_index: item._outIndex
        })
    }

    // 减少数量
    minusSelectItem(item) {
        this.props.removeSelectAction({
            sub_index: item._index,
            fu_index: item._outIndex
        })
    }

    // 隐藏购物车详情列表
    hideChoose(e) {
        if(e.target.className == 'choose-content') {
            this.props.changeIsShowChooseAction({
                isShowChoose: false
            })
        }
    }

    // 清空购物车
    clearCar() {
        this.props.cleanCarAction()
        this.props.changeIsShowChooseAction({
            isShowChoose: false
        })
    }

    render() {
        let shipping_fee = this.props.menuData.poi_info ? this.props.menuData.poi_info.shipping_fee : 0; // 配送费
        let data = this.getBuyInfo();

        return (
          <div className="shop-bar">
              {this.props.isShowChoose ?
                  <div className="choose-content" onClick={this.hideChoose}>
                      <div className="list-content">
                          <div className="content-top">
                              <div onClick={()=>this.clearCar()} className="clear-car">清空购物车</div>
                          </div>
                          {this.renderChooseItem(data)}
                      </div>
                  </div>  : null
              }
              <div className="bottom-content">
                  <div className="shop-icon" onClick={this.showChoose.bind(this)}>
                      {data.dotNum > 0 ? <div className="dot-num">{data.dotNum}</div> : null}
                  </div>
                  <div className="price-content">
                      <p className="total-price">¥{data.totalPrice}</p>
                      <p className="other-price">另需配送&nbsp;¥{shipping_fee}</p>
                  </div>
                  <div className="submit-btn" onClick={this.toSubmit.bind(this)}>去结算</div>
              </div>
          </div>
        )
    }
}
export default connect(
    (state) => ({
        menuData: state.menuReducer.menuData,
        isShowChoose: state.menuReducer.isShowChoose
    }),
    (dispatch) => ({
        changeIsShowChooseAction: bindActionCreators(changeIsShowChoose, dispatch),
        addSelectAction: bindActionCreators(addSelect, dispatch),
        removeSelectAction: bindActionCreators(removeSelect, dispatch),
        cleanCarAction: bindActionCreators(cleanCar, dispatch)
    })
)(ShopBar)
